<template>
    <div class="bi-tab" :class="boxClass">
        <div class="bi-tab-header" :class="tabClass">
            <template v-for="item in tabList" :key="item.id" >
                <div class="nav-item"   @click="switchTab(item.id)" v-show="item.show" >
                    <div class="nav-link"  :class="{active:item.focus}" >
                        <bi-icon :data="item.icon" v-if="item.icon"> </bi-icon>
                        <div class="label">{{item.label}}</div>
                    </div>
                </div>
            </template>
        </div>
        <div class="bi-tab-content">
            <slot></slot>
        </div>
    </div>
</template>


<script>
export default{
    data(){
        return{
            
            tabList:[],
        }
    },
    provide(){
        return {
            addTab:(info,switchFocus,show)=>{
                this.tabList.push({
                    id:info.id,
                    label:info.label??'',
                    icon:info.icon??'',
                    show:info.show??true,
                    focus:false,
                    switchFocus
                })

                if (this.tabList.length == 1) this.switchTab(info.id);
            },
            delTab:(id)=>{
                this.delTab(id);
            },
            switchTab:(id)=>{
                this.switchTab(id);
            },
            showTab:(id,show)=>{
                let index = this.tabList.findIndex(item=>item.id == id);

                this.tabList[index].show = show;
                 
                if (!show && this.tabList[index].focus && this.tabList.length>1){
                    if (index==0){
                        this.switchTab(this.tabList[index+1].id);
                    }else{
                        this.switchTab(this.tabList[index-1].id);
                    }
                }
            },
        }
    },
    props:{
        type:{
            type:String,
            default:'tab'
        },
        focus:{
            type:[String,Number],
            default:0
        }
    },
    watch:{
        focus(val){
            if (typeof val == 'number'){
                this.switchTab(this.tabList[0].id);
            }

            if (typeof val == 'string'){
                this.switchTab(val);
            }
        }
    },
    computed:{
        tabClass(){
            let classList = [];
            classList.push('nav');

            if (this.type === 'tab'){
                classList.push('nav-tabs');
            }

            if (this.type === 'pill'){
                classList.push('nav-pills');
            }
            return classList;
        },
        boxClass(){
            let classList = [];
            
            if (this.type === 'tab'){
                classList.push('tab-box');
            }

            return classList;
        }
    },
    methods:{
        switchTab(id){
            this.tabList.forEach(item=>{
                    
                if (item.id == id && !item.focus){
                    item.focus = true;
                    item.switchFocus(true);
                }

                if (item.id != id && item.focus){
                    item.focus = false;
                    item.switchFocus(false);
                }
                
            });
        },
        delTab(id){
            this.tabList.forEach((item,index)=>{
                if (item.id == id){
                    
                    if (item.focus && this.tabList && this.tabList.length>0){
                        if (index==0){
                            if (this.tabList[1]) this.switchTab(this.tabList[1].id);
                        }else{
                            if (this.tabList[index-1])  this.switchTab(this.tabList[index-1].id);
                        }
                    }
                    
                    this.tabList.splice(index,1);
                }
            });
        }
    },
    mounted(){
         if (this.tabList.length>0){
            if (typeof this.focus == 'number'){
                this.switchTab(this.tabList[this.focus].id);
            }

            if (typeof this.focus == 'string'){
                this.switchTab(this.focus);
            }
        }
    }
}
</script>


<style>
.bi-tab-header{
    margin-bottom: 0.5rem;
}
.bi-tab-header .nav-item{
    cursor: pointer;
}

.nav-link{
    display: flex;
    align-items: center;
}

.nav-link .bi-icon + .label{
    margin-left: 5px;
}
</style>